<!--排行-->
<template>
  <transition name="home" enter-active-class="animated slideInLeft" leave-active-class="animated fadeOutLeft">
  <div class="home">
    <Headers></Headers>
    <Extension :extensionList="extension.extensionList"></Extension>
    <ranking :ranking="subscribeBook"></ranking>
    <ranking :ranking="clickBook"></ranking>
    <ranking :ranking="hongbao"></ranking>
    <ranking :ranking="newBookMenmerClick"></ranking>
    <ranking :ranking="BookMenmerClick"></ranking>
    <ranking :ranking="wanBookClick"></ranking>
    <Footers></Footers>
  </div>
  </transition>
</template>

<script>
  import Headers from '@/components/commons/header/header.vue'
  import Extension from '@/components/classify/home/extension.vue'
  import ranking from '@/components/ranking/subscribe_list.vue'
  import Footers from '@/components/commons/footer/footer.vue'
  export default {
    name: 'Classify',
    data () {
      return {
        subscribeBook: '',
        extension: '',
        clickBook: '',
        hongbao: '',
        newBookMenmerClick: '',
        BookMenmerClick: '',
        wanBookClick: ''
      }
    },
    mounted () {
      this.$http.get('./static/data/ranking.json').then((res) => {
        this.subscribeBook = res.body.subscribeBook
        this.clickBook = res.body.clickBook
        this.hongbao = res.body.hongbao
        this.newBookMenmerClick = res.body.newBookMenmerClick
        this.BookMenmerClick = res.body.BookMenmerClick
        this.wanBookClick = res.body.wanBookClick
      })
      this.$http.get('./static/data/classdata.json').then((msg) => {
        this.extension = msg.body.extension
        this.tab = msg.body.tab
      })
    },
    components: {Headers, Extension, Footers, ranking}
  }
</script>


<style>

</style>
